<!-- 治水动态 -->
<style lang="less" scoped>
.flood {
  margin: 15px;
  .smallForm {
    display: inline-block;
  }
  .ivu-tabs-bar {
    margin-bottom: 0px;
  }
  .new-paragraph {
    margin-top: 5px;
  }
  .full-img {
    width: 100%;
    height: 245px;
  }
  .overview {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .showCard {
    height: 380px;
    overflow: hidden;
    margin: 5px;
  }
  .iconWidth {
    font-size: 24px;
    width: 49%;
    display: inline-block;
    text-align: center;
    background: #f0f0f0;
    color: #363636;
    margin-top: 5px;
  }
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>


<template>
  <div class="flood">
    <Card :bordered="false">
      <p slot="title"
         class="white">资讯管理 > <span class="select-font">治水动态</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addFlood"
                style="margin-right: 30px">新增治水动态</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-right: 30px">删除治水动态</Button>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.title"
                 style="width:200px;"
                 :maxlength="30"
                 placeholder="请输入治水动态标题"></Input>
        </Form>
        <Button type="info"
                style="margin-left:30px"
                @click="getTableData('1')">搜索</Button>
      </div>
    </Card>
    <Table @on-selection-change="showSelect"
           :data="floodData"
           :columns="floodColumns"
           stripe></Table>
    <Page class="pull-right dingwei"
          :total="Page.total"
          :current="Page.current"
          :page-size="Page.pageSize"
          size="small"
          show-total
          @on-change="changePage"></Page>
    <Modal title="治水动态"
           @on-ok="newFlood"
           v-model="floodModal"
           :mask-closable="false">
      <Form :label-width="80"
            :model="formItem"
            :rules="rules">
        <Form-item label="标题"
                   prop="dynamic_title">
          <Input v-model="formItem.dynamic_title"
                 :maxlength="35"></Input>
        </Form-item>
        <Form-item label="原文地址"
                   prop="article_url">
          <Input v-model="formItem.article_url"
                 :maxlength="100"></Input>
        </Form-item>
        <div class="demo-upload-list"
             :key="item"
             v-for="item in uploadList">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline"
                    @click.native="handleView(item)"></Icon>
              <Icon type="ios-trash-outline"
                    @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress"
                      :percent="item.percentage"
                      hide-info></Progress>
          </template>
        </div>
        <Upload v-if="btnSave"
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048000"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                type="drag"
                :action="uploadUrl"
                style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera"
                  size="20"></Icon>
          </div>
        </Upload>
      </Form>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="newFlood">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="ok">修改</Button>
        <Button @click="cancel">取消</Button>
      </div>

    </Modal>
    <Modal title="查看图片"
           @on-ok="imgDesc"
           width="800"
           v-model="visible">
      <img :src="imgName"
           v-if="visible"
           style="width: 100%">
    </Modal>
    <del-modal ref="delModal"
               title='治水动态'
               @del="del"
               :delArr="selectData"
               :url="floodUrldel"></del-modal>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'components/public/delModal';
import { domain, domain2 } from 'global/setting';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      floodUrlList: '/waterlaw/dynamic/sortlist',
      floodUrlAdd: '/waterlaw/dynamic/new',
      floodUrledit: '/waterlaw/dynamic/edit',
      floodUrldel: '/waterlaw/dynamic/del',
      urlToTop: '/waterlaw/dynamic/top',
      urlChangeTop: '/waterlaw/dynamic/topsort',
      uploadUrl: '',
      modal1: false,
      btnSave: false,
      imgSrc: '',
      seacrh: '',
      totalSize: '',
      searchForm: {},
      rules: {
        dynamic_title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
        article_url: [
          { required: true, message: '原地址不能为空', trigger: 'blur' },
        ],
      },
      floodColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '标题',
          key: 'title',
          width: 300,
          align: 'center',
        },
        {
          title: '图片',
          key: 'photo',
          align: 'center',
          render: (h, param) => {
            if (param.row.photos) {
              let html = [];
              html.push(
                h('img', {
                  attrs: {
                    src: param.row.photos,
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                  },
                })
              );
              return h('div', html);
            } else {
              return '暂无图片';
            }
          },
        },
        {
          title: '原文地址',
          key: 'article_url',
        },
        {
          title: '上传时间',
          render: (h, params) => {
            return h('div', params.row.data_time.substr(0, 10));
          },
        },
        {
          title: '区域',
          key: 'region',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '区域',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '佛山市', name: '佛山市' },
                  { value: '顺德区', name: '顺德区' },
                  { value: '南海区', name: '南海区' },
                  { value: '禅城区', name: '禅城区' },
                  { value: '高明区', name: '高明区' },
                  { value: '三水区', name: '三水区' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.region = data;
                    this.getTableData(1);
                  } else {
                    this.searchItem.region = '';
                    this.getTableData(1);
                  }
                },
              },
            });
          },
        },
        {
          title: '操作',
          width: 250,
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.is_top == '1') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.changeFlood(params.row);
                      },
                    },
                  },
                  '修改'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.toTop(params.row, '0');
                      },
                    },
                  },
                  '取消置顶'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.sortTop(params.row, 'up');
                      },
                    },
                  },
                  '上升'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.sortTop(params.row, 'down');
                      },
                    },
                  },
                  '下降'
                ),
              ]);
            } else if (params.row.is_top == '0') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.changeFlood(params.row);
                      },
                    },
                  },
                  '修改'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.toTop(params.row, '1');
                      },
                    },
                  },
                  '置顶'
                ),
              ]);
            }
          },
        },
      ],
      floodData: [],
      imgName: '',
      visible: false,
      uploadList: [],
      floodModal: false,
      formItem: {
        dynamic_title: '',
        article_url: '',
      },
      actionPage: '1',
      Page: {
        current: 1,
        pageSize: 12,
        total: 0,
      },
      img_desc: '',
      file: {},
      photo: '',
      id: '',
      i: 0,
      type: '',
      flood: false,
      work: true,
      searchItem: {
        title: '',
        region: '',
      },
      selectData: [],
      fristPage: '',
      fristSize: '',
    };
  },
  methods: {
    handleView(file) {
      this.img_desc = '';
      this.file = file;
      this.imgName = file.url;
      this.visible = true;
      this.img_desc = file.desc;
    },
    handleRemove(file) {
      // 从 upload 实例删除数据
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      this.photo = '';
    },
    handleSuccess(res, file) {
      this.photo = res.result.path;
      file.url = res.result.path;
      file.name = res.result.filename;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传 jpg 或 png 格式的图片。`,
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 20M。`,
      });
    },
    addFlood() {
      setTimeout(() => {
        this.uploadList = this.$refs.upload.fileList;
        if (this.uploadList.length > 0) {
          this.$refs.upload.clearFiles();
        }
      }, 300);
      this.btnSave = true;
      this.floodModal = true;
      this.formItem.dynamic_title = '';
      this.formItem.article_url = '';
      this.photo = '';
      $('.new-paragraph').remove();
    },
    newFlood(type) {
      let params = {
        data: {
          title: this.formItem.dynamic_title,
          photos: this.photo,
          article_url: this.formItem.article_url,
        },
        url: this.floodUrlAdd,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '新增成功',
            });
            this.floodModal = false;
            this.getTableData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getTableData(page) {
      let params = {
        data: {
          searchValue: {},
          page,
          pageSize: this.Page.pageSize,
          basis: 2,
        },
        url: this.floodUrlList,
        token: storage.session.get('token'),
        success: res => {
          this.floodData = res.data.result.result;
          this.$Loading.finish();
          this.Page.total = res.data.result.totalSize;
          this.firstPage = res.data.result.totalPage;
          this.firstSize = res.data.result.totalSize;
        },
      };
      if (this.searchItem.title !== '') {
        params.data.searchValue.title = `${this.searchItem.title}|#|like`;
      }
      if (this.searchItem.region !== '') {
        params.data.searchValue.region = `${this.searchItem.region}|#|like`;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.getTableData(page);
      this.actionPage = page;
    },
    imgDesc() {
      for (let i = 0; i < this.uploadList.length; i++) {
        if (this.uploadList[i].url == this.file.url) {
          this.uploadList[i].desc = this.img_desc;
        }
      }
      this.visible = false;
    },
    changeFlood(row) {
      $('.new-paragraph').remove();
      this.btnSave = false;
      this.floodModal = true;
      this.formItem.dynamic_title = row.title;
      this.formItem.article_url = row.article_url;
      this.id = row._id;
      this.photos = row.photos;
    },
    ok() {
      let params = {
        data: {
          title: this.formItem.dynamic_title,
          article_url: this.formItem.article_url,
          photos: this.photos,
          _id: this.id,
        },
        url: this.floodUrledit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '修改成功',
            });
            this.floodModal = false;
            this.getTableData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    cancel() {
      this.floodModal = false;
      this.visible = false;
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择治水动态');
      }
    },
    del() {
      this.selectData = [];
      this.getTableData(this.actionPage);
    },
    toTop(row, type) {
      let params = {
        data: {
          _id: row._id,
          is_top: type,
        },
        url: this.urlToTop,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '操作成功',
            });
            this.getTableData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    sortTop(row, type) {
      let params = {
        data: {
          _id: row._id,
          sort_num: row.sort_num,
          type,
        },
        url: this.urlChangeTop,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '操作成功',
            });
            this.getTableData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
  },
  mounted() {
    this.uploadUrl = `${domain}/filemanage/uploadphoto?dir=dynamic&token=${storage.session.get(
      'token'
    )}`;
    this.getTableData(1);
    this.uploadList = this.$refs.upload ? this.$refs.upload.fileList : [];
  },
};
</script>
